<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 专业管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-button
          type="primary"
          icon="el-icon-delete"
          class="handle-del mr10"
          @click="delAllSelection"
          >批量删除</el-button
        >
        <el-input
          v-model="query.no"
          placeholder="专业编号"
          class="handle-input mr10"
        ></el-input>
        <el-input
          v-model="query.name"
          placeholder="专业名"
          class="handle-input mr10"
        ></el-input>
        <el-input
          v-model="query.collegeName"
          placeholder="学院名"
          class="handle-input mr10"
        ></el-input>
        <el-input
          v-model="query.schoolName"
          placeholder="学校名"
          class="handle-input mr10"
        ></el-input>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch"
          >搜索</el-button
        >
        <el-button type="primary" icon="el-icon-refresh-right" @click="reset()"
          >重置</el-button
        >
        <el-button
          type="primary"
          style="float: right"
          icon="el-icon-plus"
          @click="addEdit()"
          >添加</el-button
        >
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" align="center"></el-table-column>
        <el-table-column label="序号" width="55" align="center">
          <template slot-scope="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          prop="no"
          label="专业编号"
          align="center"
          width="150"
        ></el-table-column>
        <el-table-column label="专业名" align="center" prop="name" width="200">
        </el-table-column>
        <el-table-column prop="classList" label="下属班级" align="center" width="200">
          <template slot-scope="scope">
            <el-tag
              type="success"
              v-for="(c, index) in scope.row.classroomList"
              :key="index"
            >
              {{ c.no }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="所属学校" align="center" prop="schoolName" width="200">
        </el-table-column>
        <el-table-column label="所属学院" align="center" prop="collegeName" width="200">
          <template slot-scope="scope">
            <el-tag type="primary">{{ scope.row.collegeName }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" width="100">
          <template slot-scope="scope">
            <el-switch
              v-model="scope.row.status"
              active-color="green"
              @change="changeStatus(scope.row)"
            ></el-switch>
          </template>
        </el-table-column>

        <el-table-column label="操作" width="180" align="center" fixed="right">
          <template slot-scope="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              icon="el-icon-delete"
              class="red"
              @click="handleDelete(scope.$index, scope.row)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          background
          layout="total, prev, pager, next,jumper"
          :current-page="query.pageIndex"
          :page-size="query.pageSize"
          :total="pageTotal"
          @current-change="handlePageChange"
        ></el-pagination>
      </div>
    </div>

    <!-- 编辑弹出框 -->
    <el-dialog title="编辑" :visible.sync="editVisible" width="30%">
      <el-form ref="form" :model="form" label-width="70px">
        <el-form-item label="专业id">
          <el-input v-model="form.id" disabled></el-input>
        </el-form-item>
        <el-form-item label="专业编号">
          <el-input v-model="form.no"></el-input>
        </el-form-item>
        <el-form-item label="专业名称">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="隶属学校">
          <el-select
            v-model="form.schoolName"
            placeholder="请选择"
            @change="getCollegeOption"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in schoolOption"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隶属学院">
          <el-select v-model="form.collegeName" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in collegeOption"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可用状态">
          <el-switch v-model="form.status" active-color="green"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetDialog" plain>重 置</el-button>
        <el-button type="primary" @click="saveEdit()">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 添加弹出框 -->
    <el-dialog title="招聘添加" :visible.sync="editVisible2" width="30%">
      <el-form ref="form" :model="form" label-width="80px" :rules="rules">
        <el-form-item label="专业编号" prop="no">
          <el-input v-model="form.no"></el-input>
        </el-form-item>
        <el-form-item label="专业名称" prop="name">
          <el-input v-model="form.name"></el-input>
        </el-form-item>

        <el-form-item label="隶属学校" prop="schoolName">
          <el-select
            v-model="form.schoolName"
            placeholder="请选择"
            @change="getCollegeOption"
          >
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in schoolOption"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="隶属学院" prop="collegeName">
          <el-select v-model="form.collegeName" placeholder="请选择">
            <el-option
              :label="item.name"
              :value="item.id"
              v-for="(item, index) in collegeOption"
              :key="index"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="可用状态">
          <el-switch v-model="form.status" active-color="green"></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editVisible = false">取 消</el-button>
        <el-button type="primary" @click="resetDialog" plain>重 置</el-button>
        <el-button type="primary" @click="saveAdd('form')">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import {
  search,
  del,
  add,
  update,
  delList,
  searchSchool,
  searchCollege,
} from "../../../api/subjects.js";

import TripartiteVue from "../Tripartite.vue";
export default {
  data() {
    return {
      query: {
        no: "",
        name: "",
        collegeName: "",
        schoolName: "",
        pageIndex: 1,
        pageSize: 10,
      },
      tableData: [],
      multipleSelection: [],
      delList: [],
      editVisible: false,
      editVisible2: false,
      form: {},
      idx: -1,
      id: -1,
      pageTotal: 4,
      schoolOption: [],
      collegeOption: [],
      rules: {
        no: [
          {
            required: true,
            message: "请输入专业编号",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入专业名称",
            trigger: "blur",
          },
        ],
        schoolName: [
          {
            required: true,
            message: "请输入隶属学校",
            trigger: "change",
          },
        ],
        collegeName: [
          {
            required: true,
            message: "请输入隶属学院",
            trigger: "change",
          },
        ],
      },
    };
  },
  created() {
    this.getData();
    searchSchool()
      .then((result) => {
        if (result.status == "200") {
          this.schoolOption = result.data;
        }
      })
      .catch((err) => {
        console.log(err);
      });
  },
  methods: {
    getCollegeOption(val) {
      searchCollege(val)
        .then((result) => {
          if (result.status == "200") {
            this.collegeOption = result.data;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },

    // 重置
    reset() {
      this.query.no = "";
      this.query.name = "";
      (this.query.schoolName = ""), (this.query.collegeName = "");
      this.getData();
    },

    // 开关状态改变
    changeStatus(row) {
      this.form.id = row.id;
      this.form.no = row.no;
      this.form.name = row.name;
      this.form.status = row.status;
      update(this.form)
        .then((result) => {
          if (result.status == "200") {
            this.$message.success("修改状态ok!");
          }
        })
        .catch((err) => {});
    },

    // 重置弹出框
    resetDialog() {
      this.form = {};
    },

    getData() {
      search(this.query)
        .then((result) => {
          if (result.status == "200") {
            this.tableData = result.data.majorList;
            this.pageTotal = result.data.totalCount;
          }
        })
        .catch((err) => {});
    },
    // 触发搜索按钮
    handleSearch() {
      this.$set(this.query, "pageIndex", 1);
      this.getData();
    },
    // 删除操作
    handleDelete(index, row) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          del(row.id)
            .then((result) => {
              if (result.status == "200") {
                this.$message.success("删除成功");
                this.tableData.splice(index, 1);
              } else {
                this.$message.danger(result.status + "：操作失败");
              }
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {});
    },
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      let str = "";
      var ids = new Array();
      this.delList = this.delList.concat(this.multipleSelection);
      for (let i = 0; i < length; i++) {
        str += this.multipleSelection[i].name + " ";
        ids.push(this.multipleSelection[i].id);
      }
      delList(ids)
        .then((result) => {
          if (result.status == "200") {
            this.$message.error(`删除了${str}`);
            this.multipleSelection = [];
            this.getData();
          } else {
            this.$message.danger("操作失败！");
          }
        })
        .catch((err) => {
          console.log(err);
        });
      console.log(ids);
    },
    // 编辑操作
    handleEdit(index, row) {
      this.idx = index;
      this.form = row;
      this.editVisible = true;
    },
    // 添加操作
    addEdit() {
      this.editVisible2 = true;
    },
    // 保存编辑
    saveEdit() {
      // if (typeof this.form.schoolName == "String") {
      //   this.schoolOption.forEach((element) => {
      //     if (element.name == this.form.schoolName) {
      //       this.form.schoolName = element.id;
      //     }
      //   });
      // }
      update(this.form)
        .then((result) => {
          if (result.status == "200") {
            this.editVisible = false;
            this.$message.success(`修改第 ${this.idx + 1} 行成功`);
            this.getData();
          }
        })
        .catch((err) => {});
    },

    // 保存添加
    saveAdd(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          add(this.form)
            .then((result) => {
              if (result.status == "200") {
                this.$message.success(`新增数据成功！`);
                this.editVisible2 = false;
                this.getData();
              }
            })
            .catch((err) => {});
        }
      });
    },
    // 分页导航
    handlePageChange(val) {
      this.$set(this.query, "pageIndex", val);
      this.getData();
    },
  },
};
</script>

<style scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 150px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
